<template>
  <div>
    <a-modal
      title="批量设置班次"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width="600"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model ref="ruleForm" :model="formData" :rules="rules" layout="inline">
        <a-card title="班次类别">
          <a-radio-group v-model="formData.attend_type" style="width: 100%;line-height: 40px;">
            <a-row>
              <a-col :span="8">
                <a-radio :value="0">按固定班次</a-radio>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="固定班次" prop="class_key" :rules="{
                      required: formData.attend_type == 0 ? true : false,
                      message: '请选择固定班次',
                      trigger: 'change',
                    }">
                  <a-select v-model="formData.class_key" :disabled="formData.attend_type == 0 ? false : true"  style="width: 200px">
                    <a-select-option v-for="item in fixedTypeList" :key="item.pkey" :value="item.pkey">{{item.class_name}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-radio :value="1">按轮班班次</a-radio>
              </a-col>
              <a-col :span="16">
                <a-form-model-item label="轮班班次" prop="shift_key" :rules="{
                      required: formData.attend_type == 1 ? true : false,
                      message: '请选择轮班班次',
                      trigger: 'change',
                    }">
                  <a-select v-model="formData.shift_key" :default-value="0" :disabled="formData.attend_type == 1 ? false : true" style="width: 200px">
                    <a-select-option v-for="item in shiftTypeList" :key="item.pkey" :value="item.pkey">{{item.shift_name}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-radio-group>
          <div class="desc">
            <h3 class="desc_title">提示</h3>
            <p class="desc_value">按轮班班次排班时需到(轮班排班)中设置轮班期限</p>
          </div>
        </a-card>
        <!-- <a-card title="周末定义" style="margin-top: 20px">
            <a-radio-group v-model="formData.weekend" style="width: 100%;line-height: 40px;">
                <a-radio :value="0">周六周日休息</a-radio>
                <a-radio :value="1">周六下午周日休息</a-radio>
                <a-radio :value="2">周日休息</a-radio>
            </a-radio-group>
        </a-card> -->
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getAttClassSelectListApi,getShiftAttClassSelectListApi,editScheduleAttClassApi } from '@/api/attendance'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      formData: {
        attend_type: 0, // 类别 0固定班次 1轮班班次
        class_key: '', // 类别值
        shift_key: '', // 类别值
        // weekend: 0, // 周末定义
        pkeys: []
      },
      rules: {
        attend_type: [{ required: true, message: '请选择类别', trigger: 'change' }],
        class_key: [{ required: true, message: '请选择固定班次', trigger: 'change' }],
        shift_key: [{ required: true, message: '请选择轮班班次', trigger: 'change' }],
        weekend: [{ required: true, message: '请选择周末定义', trigger: 'change' }],
      },
      fixedTypeList: [],
      shiftTypeList: []
    }
  },
  created() {
    this.getAttClassSelectList()
    this.getShiftAttClassSelectList()
  },
  methods: {
    edit(pkeys) {
      this.formData.pkeys = pkeys
      this.visible = true
    },
    resetForm() {
        this.formData.attend_type = 0
        this.formData.class_key = ''
        this.formData.shift_key = ''
        this.formData.weekend = 0
        this.formData.pkeys = []
    },
    handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true
          let formObj = {...this.formData}
          if (this.isEdit) {
            formObj.pkey = this.pkey
          }
          if(formObj.attend_type == 1) {
            formObj.class_key = 0
          }else {
            formObj.shift_key = 0
          }
          const { statusCode, errors } = await editScheduleAttClassApi(formObj)
          this.confirmLoading = false
          if (statusCode == 200) {
            this.visible = false
            this.$message.success('保存成功！')
            this.$emit('saveSuccess')
            this.resetForm()
            this.$parent.getTableData()
          } else {
            this.$message.error(errors)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 获取固定班次列表
    async getAttClassSelectList() {
      const { data } = await getAttClassSelectListApi()
      this.fixedTypeList = data
    },
    // 获取轮班班次列表
    async getShiftAttClassSelectList() {
      const { data } = await getShiftAttClassSelectListApi()
      this.shiftTypeList = data
    }
  },
}
</script>

<style lang="scss" scoped>
</style>